<template>
  <div class="bottom-bar">
    <!-- 收藏 -->
    <div>
      <div
        class="collection"
        @click="favoriteClick"
        v-if="gameinfo.is_favorite === 0"
      >
        <div class="icon-collection">
          <img src="../../../assets/img/detail/favorite.png" alt="" />
          <div class="hidden">无</div>
        </div>
        <div>收藏</div>
      </div>
      <div
        class="collection"
        @click="favoriteClick"
        v-else-if="gameinfo.is_favorite === 1"
      >
        <div class="icon-collection">
          <img src="../../../assets/img/detail/favorite-active.png" alt="" />
          <div class="hidden">无</div>
        </div>
        <div>已收藏</div>
      </div>
    </div>
    <!-- 下载 -->
    <div class="download">
      <div v-if="gameinfo.game_type !== '3'">
        <div v-if="gameSignType === '1'" class="gameload_ordinary">
          <div v-if="gameinfo.is_ios_lost === 0" @click="normalDownload">
            普通下载
          </div>
          <div v-else @click="repairClick">修复中...</div>
        </div>
        <div
          v-else-if="gameSignType === '2'"
          @click="supremeLoad"
          class="gameload_personal"
        >
          至尊版下载
        </div>
        <div v-else-if="gameSignType === '3'" class="gameload_box">
          <div class="gameload_left">
            <div v-if="gameinfo.is_ios_lost === 0" @click="normalDownload">
              普通下载
            </div>
            <div v-else @click="repairClick">修复中...</div>
          </div>
          <div class="gameload_right" @click="supremeLoad">至尊版下载</div>
        </div>
      </div>
      <div v-else @click="startPlay" class="start_Paly">开始玩</div>
    </div>
    <!-- 点评 -->
    <div class="comment" @click="commentClick(gameId)">
      <div class="icon-comment">
        <img src="../../../assets/img/detail/icon_commment.png" alt="" />
        <div class="hidden">无</div>
      </div>
      <div>点评</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    gameinfo: {
      type: Object,
      default() {
        return {};
      },
    },
    gameSignType: {
      type: String,
      default: "",
    },
  },
  methods: {
    commentClick(gameId) {

    },
    favoriteClick() {

    },
    normalDownload() {

    },
    repairClick() {

    },
    supremeLoad() {

    },
    startPlay() {

    },
  },
};
</script>

<style lang="less" scoped>
.bottom-bar {
  width: 9.2rem;
  height: 1.333333rem;
  padding: 0 .4rem;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

.comment,
.collection {
  height: .933333rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.icon-comment,
.icon-collection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: .506667rem;
  height: .506667rem;
}

.icon-comment img,
.icon-collection img {
  width: 100%;
  height: 100%;
}

.comment div,
.collection div {
  font-size: .293333rem;
  font-weight: 400;
  color: #ff5543;
}

.download {
  width: 6.933333rem;
  height: 1.093333rem;
  font-size: .4rem;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: 1.093333rem;
}

.start_Paly {
  background: #FF5543;
  border-radius: .546667rem;
}

.gameload_personal,
.gameload_ordinary {
  width: 6.933333rem;
  height: 1.093333rem;
  background: #FF5543;
  border-radius: .546667rem;
}

.gameload_box {
  display: flex;
  justify-content: space-between;
}

.gameload_left,
.gameload_right {
  width: 3.333333rem;
  height: 1.093333rem;
  background: #FF5543;
  border-radius: .546667rem;
}

.hidden {
  width: 0;
  overflow: hidden;
}
</style>